<template>
  <div>
    <div class="img-wrap">
      <img src="@/assets/image/complexLogo.png" alt="" v-if="!showTable">
    </div>
    <div class="search-wrap" v-if="!showTable">
      <Form @search="search" v-loading.lock="fullscreenLoading" />
    </div>
    <transition name="fade">
      <Table
        v-if="showTable"
        :options.sync="options"
        :keyWords.sync="keyWords"
        @search="search"
        v-loading.lock="fullscreenLoading"
        :tableLabel.sync="tableLabel"
        :sortList.sync="sortList"
        :headerUpdate="headerUpdate"
      />
    </transition>
  </div>
</template>

<script>
import Form from "./components/Form";
import Table from "./components/Table";
import { search as tableSearch } from "@/api/search/complex";
import { operator } from "./components/Table";

export default {
  name: "complex",
  components: {
    Form,
    Table,
  },
  data() {
    return {
      showTable: false,
      options: [],
      keyWords: "",
      fullscreenLoading: false,
      tableLabel: [],
      sortList: [],
      headerUpdate: false
    };
  },
  methods: {
    search(options = [], keyWords) {
      this.fullscreenLoading = true;
      this.options = options;
      this.keyWords = keyWords;
      const sortMainTableNos = options[0].sortMainTableNo;
      tableSearch(sortMainTableNos, keyWords)
        .then((res) => {
          let tableLabel = res.rows[0];
          //在结果中添加属性，对应封装的Table组件中所需传入数据的属性
          tableLabel.forEach((item) => {
            item.label = item.fieldAlias;
            item.prop = item.fieldName;
          });
          //添加操作对象，对应封装的Table组件中所需数据
          tableLabel.push(operator);
          this.tableLabel = tableLabel;
          this.sortList = res.rows[1];
          this.showTable = true;
          this.headerUpdate = !this.headerUpdate;
        })
        .finally(() => (this.fullscreenLoading = false));
    },
  },
};
</script>

<style lang="scss">
.search-wrap {
  position: absolute;
  top: 550px;
  left: 0;
  right: 0;
  margin: auto;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.img-wrap {
  width: 700px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  margin: auto;
  img {
    width: 100%;
  }
}
</style>